<template>
	<view class="bigBox">
		<view class="topMenu">
			<view class="" @click="goToPage('order')">
				<view class="">订单</view>
				<view class="hr"></view>
			</view>
			<view @click="goToPage('afterOrder')">
				<view class="">售后订单</view>
				<view class="hr"></view>
			</view>
			<view class="check" @click="goToPage('delivery')">
				<view class="">配送薪酬</view>
				<view class="hr"></view>
			</view>
		</view>
		<view class="top">
			<view class="changeDispatcher" @click="selectVisiable=true">
				<view class="">{{riderId?dispatcher:'全部骑手'}}</view>
				<image src="https://www.yongshantuan.cn/images/yongshan/arrow.png" mode=""></image>
			</view>
			<view class="timeContent">
				<view class="time">
					<u-input type="text" v-model="timeBegin" placeholder="开始时间" :disabled="true"
						@click="showTimePicker('startTime')">
					</u-input>
				</view>
				<view class="hr">-</view>
				<view class="time">
					<u-input type="text" v-model="timeEnd" placeholder="结束时间" :disabled="true"
						@click="showTimePicker('endTime')">
					</u-input>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="list" v-for="(item,index) in staffList" :key="index">
				<view class="">
					<view class="">姓名: <text>{{item.fullName}}</text></view>
					<view class="">当日送餐量: <text>{{item.orderQuantity}}</text></view>
				</view>
				<view>
					<view class="">累计收入: <text>{{item.accumulatedWages}}</text></view>
					<view class="">今日收入: <text>{{item.wages}}</text></view>
				</view>
				<view>
					<view class="">底薪: <text>{{item.baseSalary}}</text></view>
					<view class="">提成: <text>{{item.commission}}</text></view>
					<view class="">其他收入: <text>{{item.otherIncome}}</text></view>
				</view>
				<view>
					<view class="">其他收入备注: <text>{{item.otherIncomeRemarks}}</text></view>
				</view>
				<view>
					<view class="">工资状态: <text>{{item.salaryStatus}}</text></view>
					<view class="">日期: <text>{{item.statisticalDate}}</text></view>
				</view>
			</view>
		</view>
		<CommenFooter :checkIndex="1"></CommenFooter>
		<u-picker v-model="showTime" mode="time" :params="params" @confirm="confirm"></u-picker>
		<view class="selectBox">
			<u-popup mode="bottom" v-model="selectVisiable" :closeable="true">
				<view class="selectContent">
					<view class="title">骑手列表</view>
					<view class="selList" v-for="(item,index) in dispatchList" :key="index" @click="selectThis(item)">
						{{item.fullName}}
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import {
		getDispatcherList,
		getDeliveryList
	} from '@/utils/req/api.js'
	import CommenFooter from '@/components/footer/footer.vue'
	export default {
		components: {
			CommenFooter,
		},
		data() {
			return {
				storeName: '',
				checkStoreInfo: '',
				showTime: false,
				timeBegin: '',
				timeEnd: '',
				timeType: '',
				params: {
					year: true,
					month: true,
					day: true,
				},
				staffList: [],
				dispatchList: [],
				dispatcher: '',
				riderId: '',
				selectVisiable: false,
				pageSize: 10,
				pageNo: 1,
				moreFlag: false
			}
		},
		mounted() {
			this.getDispatcherList()
			this.getDeliveryList()
		},
		methods: {
			async getDispatcherList() {
				let res = await getDispatcherList({
					pageSize: -1,
					pageNo: 1,
				});
				console.log('配送员列表res', res);
				this.dispatchList = res.data.result;
				this.dispatchList.unshift({
					fullName: '全部',
					id: ""
				})
			},
			async getDeliveryList() {
				let res = await getDeliveryList({
					pageSize: this.pageNo * this.pageSize,
					pageNo: 1,
					riderId: this.riderId,
					statisticalDate_begin: this.timeBegin,
					statisticalDate_end: this.timeEnd
				})
				this.staffList = [];
				this.staffList = res.data.result.records;
				this.moreFlag = false;
				console.log('棋手统计信息', res);
			},
			goToPage(type) {
				let url;
				if (type == 'order') {
					url = '/pages/order/order'
				} else if (type == 'afterOrder') {
					url = '/pages/order/afterOrder';
				} else if (type == 'delivery') {
					url = '/pages/order/delivery';
				}
				uni.navigateTo({
					url
				})
			},
			showTimePicker(type) {
				if (type == 'startTime') {
					this.timeType = type
				}
				if (type == 'endTime') {
					this.timeType = type
				}
				this.showTime = true;
			},
			confirm(e) {
				let time = `${e.year}-${e.month}-${e.day}`;
				if (this.timeType == 'startTime') {
					this.timeBegin = time;
				}
				if (this.timeType == 'endTime') {
					this.timeEnd = time;
				}
				this.getDeliveryList();
			},
			selectThis(item) {
				console.log('id');
				this.dispatcher = item.fullName;
				this.riderId = item.id;
				this.selectVisiable = false;
				this.getDeliveryList()
			}
		},
		onReachBottom() {
			if (!this.moreFlag) {
				if (this.staffList.length != 0 && this.staffList % 10 == 0) {
					this.pageNo = this.pageNo + 1;
					this.moreFlag = true;
					this.getDeliveryList()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bigBox {
		background-color: #F5F5F5;
		padding-bottom: 200rpx;
		min-height: 100vh;
	}

	.topMenu {
		padding: 20rpx 0;
		background-color: #fff;
		padding: 20rpx;
		@include flex(flex-start, flex-start);

		>view {
			margin-right: 30rpx;
			font-size: 40rpx;
			line-height: 56rpx;
			color: rgba(0, 0, 0, .35);
			font-weight: bold;

			>view:nth-child(2) {
				width: 40rpx;
				height: 8rpx;
				background: #FA690A;
				margin-top: 10rpx;
				display: none;
			}
		}

		>.check {
			color: #000;

			>view:nth-child(2) {
				display: block;
			}
		}
	}

	.top {
		padding: 20rpx;
		@include flex(space-between, center);
		background-color: #fff;

		>view:nth-child(1) {
			@include flex();
			width: 250rpx;
			font-size: 30rpx;

			image {
				width: 20rpx;
				height: 20rpx;
				margin-left: 10rpx;
			}
		}

		>view:nth-child(2) {
			@include flex();
			flex: 1;

			&:nth-child(1) {
				flex: 1;
				@include flex();

				image {
					width: 50rpx;
					height: 50rpx;
					position: absolute;
					left: 10rpx;
					top: 5rpx;
				}

				border-radius: 50rpx;
				border: 1px solid #f5f5f5;
				position: relative;
				overflow: hidden;

				/deep/.u-input__input {
					font-size: 28rpx;
					line-height: 60rpx;
					height: 60rpx;
					min-height: auto !important;
					text-indent: 60rpx;
					background-color: #f5f5f5;
				}
			}
		}

		.timeContent {
			@include flex(space-between, center);
			flex: 1;

			.time {
				width: 45%;
				background-color: #f5f5f5;
				border-radius: 100rpx;

				/deep/.u-input__input {
					text-align: center;
					font-size: 26rpx !important
				}
			}

			.hr {
				margin: 0 10rpx;
			}
		}
	}



	.list {
		background-color: #fff;
		padding: 40rpx 40rpx;
		margin-top: 20rpx;

		>view {
			// @include flex(space-between,center);
			@include flex();
			font-size: 32rpx;
			line-height: 1.5;
			flex-wrap: wrap;

			>view {
				margin: 15rpx 0;
				margin-right: 60rpx;
				// color: rgba(0, 0, 0, 0.35);
				color: #000;

				text {
					color: #000;
					margin-left: 10rpx;
				}
			}
		}
	}

	.selectContent {
		.title {
			font-size: 32rpx;
			line-height: 2;
			font-weight: bold;
			text-align: center;
			margin-bottom: 14rpx;
		}

		.selList {
			border-bottom: 1px solid rgba(0, 0, 0, 0.05);
			font-size: 28rpx;
			line-height: 40rpx;
			padding: 24rpx 0;

			&:last-child {
				border: 0;
			}

			&:nth-child(2) {
				font-weight: bold;
				font-size: 32rpx;
			}
		}
	}
</style>
<style lang="scss">
	.selectBox {
		/deep/.u-drawer-bottom {
			width: 100% !important;
			padding: 36rpx 20rpx 40rpx 20rpx;
			border-top-left-radius: 40rpx;
			border-top-right-radius: 40rpx;
			min-height: 30vh;
		}
	}
</style>
